<template>
  <div>
    <el-card>
      <div slot="header">
        <my-breadcrumb>个人设置</my-breadcrumb>
      </div>

      <el-row>
        <el-col :span="16">
          <el-form ref="form" :model="userInfo" :rules="rules" label-width="80px">
            <el-form-item label="编号" >
              <span>{{userInfo.id}}</span>
            </el-form-item>
            <el-form-item label="手机" >
              <span>{{userInfo.mobile}}</span>
            </el-form-item>
            <el-form-item label="媒体名称" prop="name">
              <el-input v-model="userInfo.name" />
            </el-form-item>
            <el-form-item label="媒体简介" prop="intro">
              <el-input v-model="userInfo.intro" type="textarea" />
            </el-form-item>

            <el-form-item label="联系邮箱" prop="email">
              <el-input v-model="userInfo.email"/>
            </el-form-item>

            <el-form-item>
              <el-button @click="hSave">保存设置</el-button>
            </el-form-item>
          </el-form>

        </el-col>
        <el-col :span="8">
          <!--
            [el-upload](https://element.eleme.cn/#/zh-CN/component/upload#yong-hu-tou-xiang-shang-chuan)的主要属性：
            // 不走axios请求
            // 不走axios请求
            // 不走axios请求
            // 不走axios请求
            - action： 必选参数，上传的地址：http://ttapi.research.itcast.cn/mp/v1_0/user/images
            - headers: 设置上传的请求头部。要携带token
            - name：上传的文件字段名。要与接口中要求保持一致。
            - show-file-list： 是否显示已上传文件列表
            - before-upload: 上传之前对文件进行检测。
            - on-success：文件上传成功时的钩子。`function(response, file, fileList)` -->
          <el-upload
            class="avatar-uploader"
            action="http://api-toutiao-web.itheima.net/mp/v1_0/user/images"
            name="image"
            :headers="headers"
            :http-request="hUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
              <!-- 如果上传成功了，就显示这个图片 -->
              <!-- 对于图片来说，并不是一旦设置了src之后，就立即可以看到效果 -->
              <!-- <img v-if="uploadImageUrl" :src="uploadImageUrl" class="avatar"> -->
              <!-- load事件：表示这张图已经加载完成，用户肯定是可以能看到了 -->
              <el-image v-if="userInfo.photo" :src="userInfo.photo" class="avatar"/>
              <!-- 否则，显示加号 -->
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'settings',
  data () {
    return {
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 1, max: 7, message: '用户名长度在1,7之间', trigger: 'blur' }
        ],
        intro: [
          { required: true, message: '请输入个人介绍', trigger: 'blur' },
          { min: 1, max: 20, message: '用户名长度在1,20之间', trigger: 'blur' }
        ],
        email: [
          {
            pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            message: '请输入合法的email',
            trigger: 'blur'
          }
        ]
      },
      userInfo: {
        email: '',
        id: '',
        intro: '',
        mobile: '',
        name: '',
        photo: ''
      },
      // uploadImageUrl: '', // 头像地址
      headers: {
        Authorization: `Bearer ${localStorage.getItem('tokenStr')}`
      }
    }
  },
  created () {
    this.loadUserInfo()
  },
  methods: {
    // 由于后端接口是patch，而el-upload只支持post，所以这里需要我们自己来写
    async hUpload (config) {
      // 在这个回调函数中，会接收一个对象，这个对象有一个file属性，就表示当前用户选中的图片
      console.log('正在上传....', config, config.file)

      // ajax上传文件时，是怎么传参数的？
      // 创建一个formData 对象
      const fd = new FormData()
      // 向formData对象中补充一个参数
      fd.append('photo', config.file)
      try {
        const res = await this.$axios({
          method: 'PATCH',
          url: '/mp/v1_0/user/photo',
          data: fd
          // data: {
          //   photo: config.file
          // }
        })
        console.log(res)
        this.$message.success('上传成功')
        // 更新图片
        this.userInfo.photo = res.data.data.photo

        // 发布事件
        // 事件名是mod-user, 值是对象{newPhoto:新图片的地址}
        this.$eventBus.$emit('mod-user', {
          newPhoto: res.data.data.photo
        })
      } catch (err) {
        console.log(err)
        this.$message.error('上传失败')
      }
    },
    // 组装参数
    buildParams () {
      const { name, intro, email } = this.userInfo
      const data = {
        name, intro, email
      }
      return data
    },
    async doSave () {
      const data = this.buildParams()
      try {
        const res = await this.$axios({
          method: 'PATCH',
          url: '/mp/v1_0/user/profile',
          data
        })
        console.log(res)
        this.$message.success('操作成功')

        // 发布事件
        // 事件名是mod-user, 值是对象{newName:新图片的地址}
        this.$eventBus.$emit('mod-user', {
          newName: data.name
        })
      } catch (err) {
        console.log(err)
        this.$message.error('操作失败')
      }
    },
    hSave () {
      // 表单检验
      this.$refs.form.validate(valid => {
        if (valid) {
          this.doSave()
        } else {
          this.$message.error('表单验证不能过')
        }
      })
    },
    async loadUserInfo () {
      try {
        const res = await this.$axios({
          method: 'get',
          url: '/mp/v1_0/user/profile'
        })
        console.log(res)
        this.$message.success('操作成功')
        // 保存用户信息
        const {
          email, // 邮箱
          id, // id
          intro,
          mobile,
          name,
          photo
        } = res.data.data
        // this.userInfo = res.data.data
        this.userInfo = {
          email,
          id,
          intro,
          mobile,
          name,
          photo
        }
      } catch (err) {
        console.log(err)
        this.$message.error('操作失败')
      }
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      // file.size 单位是字节
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleAvatarSuccess (res) {
      // res中保存着本次上传操作成功后，后端接口返回的数值
      // 1. 预览效果
      this.uploadImageUrl = res.data.url
      // console.log('文件上传成功', res, file)
      this.$message.success('上传成功')
    }
  }
}
</script>

<style lang="less" scoped>

.avatar-uploader {
  text-align: center;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #ddd;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
